<template>
	<view class="title">
		<text>
			{{title}}
		</text>
		<text>
			{{parms.name}}
		</text>
	</view>
	<view class="d-flex btn">
		<u-icon name="photo" color="#2979ff" size="28" @click.passive="logs('打印内容')" />
		<view>
			<u-button type="primary" text="打印自定义log" @click.passive="logs('打印内容')" />
		</view>
		<view>
			<u-button type="error" @click="showHttp()">发起一个请求</u-button>
		</view>
		<view>
			<u-button type="error" @click="store.num++">更改store.num</u-button>
		</view>
		<view>
			<u-button type="error" @click="setStorePatch">$patch更改store</u-button>
		</view>
		<view>
			<u-button type="error" @click="setStoreMethod">method更改store</u-button>
		</view>
		<view>
			<u-button type="error" @click="setStoreState">替换store整个state类似合并</u-button>
		</view>
		<view>
			<u-button type="error" @click="store.$reset()">重置store</u-button>
		</view>

	</view>
	<view>
		store.storeName：{{store.storeName||'不存在'}}
	</view>
	<view>
		store.num：{{store.num||'不存在'}}
	</view>
	<view>
		getters中的参数store.numPlus：{{store.numPlus||'不存在'}}
	</view>

</template>

<script setup>
	import { logs } from "../../common/func.js"
	import apis from "@/apis"
	import { onReady, onLoad, onHide, onUnload } from "@dcloudio/uni-app"
	import { ref, reactive } from 'vue'
	import { useStore } from "@/store/index"

	//------------------------------------pinia部分示例------------------------------------------------------------------/
	const store = useStore()
	const setStorePatch = () => {
		store.$patch({
			num: 999,
			storeName: "$patch修改"
		})
	}
	const setStoreMethod = () => {
		store.$patch((state) => {
			state.num += 1
			state.storeName = 'Method修改'
		})
	}
	const setStoreState = () => {
		store.$state = {
			name: "空",
			num: 8848
		}
		console.log(store.$state)
	}

	store.$subscribe((mutation, state) => {
		mutation.name
		mutation.storeName
		mutation.num
		console.log(state, '有值更改了')
	}, {
		detached: true
	})
	//{ detached: true } true全局储存不随组件销毁 false随组件销毁 默认 false


	//--------------------------------------基本示例--------------------------------------------------------/
	let title = ref('Hello')

	let parms = reactive({
		name: "uniApp_puls"
	})

	const showHttp = () => {
		apis.homepage_post(parms).then(res => {
			console.log('请求成功')
		})
	}

	function setTitle() {
		parms.name = "!come on"
		title.value = 'HelloWorld'
	}
	//-------------------------------------------生命周期示例-----------------------------------------------------------------/
	onReady(() => {
		uni.showToast({
			title: "我已经准备好了"
		})
		console.log('Pages onReady')
	})
	onLoad(() => {
		console.log('Pages onLoad')
	})
	onShow(() => {
		console.log('Pages onShow')
	})
	onHide(() => {
		console.log('Pages onHide')
	})
	onUnload(() => {
		console.log('Pages onUnload')
	})
</script>

<style lang="scss" scoped>
	.btn {
		padding: 40rpx;

		>view {
			margin: 15rpx 15rpx 0 0;
		}
	}

	.title {
		text-align: center;
		font-weight: bold;
		margin: 80rpx 0;

		text {
			margin-left: 20rpx;
		}
	}
</style>
